<template>
    <div draggable="true"  class="material" @dragstart="handleDragStart">
            <img 
            :src="image" 
            :alt="material.packageName" 
            class="material-img" />
            <span>{{material.packageName }}</span>
        </div>
</template>

<script lang="ts" setup>
import { fetchImage } from '@/materials';
defineOptions({
    name: "LibraryItem"
})

const props = defineProps({
    material: {
        type: Object,
        required: true
    }
});

const image = fetchImage(props.material.image);

const handleDragStart = (event: DragEvent) => {
    const imageEl = new Image();
    imageEl.src = image;
    event.dataTransfer!.setDragImage(imageEl, 10, 10);
    event.dataTransfer!.setData("application/json", JSON.stringify(props.material));
    event.dataTransfer!.effectAllowed = "copy";
}
</script>

<style scoped lang="scss">
 .material {
    box-sizing: border-box;
    width: 33.33%;
    height: 100px;
    border-right: 1px solid #efeff3;
    border-bottom: 1px solid #edeff3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
 }

 .material-img {
   width: 50px;
   height: 25px;
 }
</style>